<script setup lang="ts">

import { Lock } from '@element-plus/icons-vue'

const props = withDefaults(defineProps<{
  modelValue: string,
}>(), {

})
const _modelValue = ref('')
const emits = defineEmits(['update:modelValue'])

const modelValueCustomer = computed({
  get () :string {
    _modelValue.value = ''.padStart(props.modelValue?.length || 0, '*')
    return props.modelValue
  },
  set (val) {
    emits('update:modelValue', val)
  }
})
</script>

<template>
  <div class="position-relative">
    <el-input
      v-model="_modelValue" class="y_input"
      style="top: 0;left:0;position: absolute;z-index: 2;pointer-events: none;"
    />
    <el-input v-model="modelValueCustomer" class="z_input" />
  </div>
</template>

<style scoped lang="scss">
::v-deep(.y_input.el-input) {
  --el-input-bg-color: transparent!important;
  .el-input__wrapper {
    background-color: transparent!important;
  }
}
::v-deep(.z_input) {
  --el-input-text-color: red;
  .el-input__inner {
    letter-spacing: -2px;
    //height: 20px; /*高度需要添加，不然文字下面会多出一些空隙*/
    text-align: justify;
  }
}
</style>
